一.开发环境(webpack)
注意:不是所有的浏览器都支持es6语法
package.json==>npm init
node_modules==>npm install webpack -D
webpack.config.js==>配置文件
src(开发阶段目录)
    index.html
    index.js 
    js 
        01.js 
        02.js 
public(生产阶段目录)

二.babel和polyfill
1》babel把es6的语法转换为es5,es3

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
module:{
    rules:[
        {
            test:/\.(jsx|js)$/,
            use:{
                loader:'babel-loader',
                options:{
                    presets:[
                        "env","react"
                    ]
                }
            },
            exclude:/node_modules/
        }    
    ]
},

2》babel-polyfill==>很多语法的api不能转码,需要安装
npm install babel-polyfill -D
import 'babel-polyfill'

三.let
    1.作用域,只能在本代码块有效
    2.不具有变量的提升性(不能转码)
    3.暂时性死区
    4.不能重复声明
四.const(常量)
    1.常量的值不能改变
    2.声明必须赋值
    3.对象(引用类型)可以修改赋值

五.数组的解构赋值
格式:
    let [a,b,c]=[1,2,3]
注意:
    1.如果匹配不到则变量是undefined
    2.如果等号的右边不是数组(或者严格来说,不是可遍历的结构),那么就会报错

六.对象的解构赋值
格式:
    let {a,b,c}={a:1,b:2,c:3}
注意:如果匹配不到则变量是undefined

七.字符串_数值_布尔的解构赋值
1.字符串的解构赋值
    格式:
        let [a,b,c]='123'
    注意:如果匹配不到则变量是undefined
2.数值的解构赋值
3.布尔的解构赋值

八.函数的解构赋值

九.字符串_Unicode部分
1.Unicode 
注意:
    超出FFFF范围:𠮷
    解决超出不能正确识别的字符:{}
2.新增方法
    codePointAt() ==>可以识别32位的UTF-16字符
    判断当前字符是否大于0xFFF
    at() ==>修正了charAt()不能解析大于0xFFF字符

十.字符串方法
includes()  :返回布尔值，表示是否找到了参数字符串
startsWith():返回布尔值，表示参数字特串是否在原字符串的头部
endsWith()  :返回布尔值，表示参数字符串是否在原字符串的尾部
repeat()    :重复次数
padStart()  :
padEnd()    :

十一.模板字符串_标签模板
1.模板字符串
    格式: ``
    加入内容:`${变量名称...}`
2.标签模板
    alert()==>alert``
    注意:加入变量,会先把字符串放入到一个数组中

十二.正则_修饰符_属性
1.构造函数
    new RegExp('xxx/igm','i')
    参数2(修饰符)会覆盖前面的修饰符
2.属性
    sticky ==>看一看有没有开启y模式
    flags  ==>返回正则表达式
3.修饰符 
    y:y和g特别像(全文匹配)
    区别   
        g:后面有就可以   
        y:从匹配后面第一个开始
    u:正确处理大于\uFFFF的Unicode字符

十三.数值_方法_Math
1.注意点
    parseInt()  parseFloat()
    都是在全局对象下(window)
    ES6:
    Number.parseInt()  
    Number.parseFloat()
2.Number对象新增方法
    Number.isFinite() :检测一个数值是否有限
    Number.isNaN()    :检测一个数值是否是NaN
    Number.isInteger():检测一个数值是否为整数
3.Math对象新增方法
    Math.trunc():去除小数部分,返回整数部分
    Math.sign() :判断一个数值是整数,负数,0
    整数:1 负数:-1  0:0   -0:-0  其他:NaN

十四.函数_默认值_箭头函数
1.函数参数的默认值
    function fn(obj={})
2.函数作用域
3.rest(...)
4.箭头函数 
(参数1,参数2)=>{

}
    没有arguments对象
    不能new
    this指向

十五.数组_新增方法
1.运算符(...)
2.方法 
    1》Array.from():把一个看起来类似于数组的对象,转换成真正的数组
    2》Array.of()  :把一组值转换成为数组
    3》copyWithin():将指定位置的成员复制到其他位置(会覆盖原有成员),最后返回新的数组
        三个参数:
            target : 从该位置开始替换数据
            start  : 从该位置开始读取数据,默认为0,如果为负值,表示倒数
            end    : 到该位置停止读取数据,默认等于数组长度,如果为负值,表示倒数
    4》find()      :
    5》findIndex() :
    6》fill()      :填充数组
        三个参数:
            参数1:替换成什么
            参数2:开始位置
            参数3:结束位置
    7》数组实列的entries() ,keys() ,values()  
    8》includes()  :返回的是布尔值

十六.对象扩展(一)
1.属性的简洁表示法
    let obj={
        a 
    }
2.属性名表示式
3.方法的name属性
4.Object.is():比较
5.Object.assign():用于对象合并,将源对象的所有可枚举属性,复制到目标对象

十七.对象扩展(二)
6.对象属性的可枚举
    Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象
7.遍历
    Object.keys()
    Object.values()
    Object.entries()

十八.Class基本语法
格式:
    class 名称{
        constructor(){

        }
        方法名称1(){
        }
        方法名称2(){
        }
    }
    new 名称();

十九.Class的继承
实现继承格式:
    class 子类 extends 父类{
        constructor(){
            super();  //在最前面放
            this.sex='男';
        }    
    }

二十.Symbol 
作用:解决命名冲突
概述:
    1.一种新的原始数据类型Symbol
    2.表示独一无二的值
使用:
    1.symbol 
    2.symbol.for()
取值:(都是返回数组)
    Object.getOwnPropertySymbols()
    Reflect.ownKeys()

二十一.Set和WeakSet
1.Set 
    1》是什么(***可以去重,要看数据类型)
        新的数据结构,类似于数组
        值都是唯一的
    2》使用方法
        new Set()
        add   ==>增
        size  ==>length
        clear ==>全删
        delete==>删除某一个
        has   ==>查
    3》遍历
        keys()：返回键名的遍历器
        values()：返回键值的遍历器
        entries()：返回键值对的遍历器
        forEach()：使用回调函数遍历每个成员

2.WeakSet
    使用方法
        add 
        delete
        has 

****Set和WeakSet区别****
    1>WeakSet的值必须是对象
    2>方法不同
    3>WeakSet不可遍历
        
二十二.Map和WeakMap
1.Map
    1》新的数据结构   
    2》Map的作用
        key可以是任意内容
    3》使用方法
        长度:size
        删除:delete,clear
        增:set()
        查:get()
    4》遍历
        keys()：返回键名的遍历器
        values()：返回键值的遍历器
        entries()：返回键值对的遍历器
        forEach()：使用回调函数遍历每个成员
2.WeakMap 

****Map和WeakMap区别****
    1>WeakMap没有遍历操作
    2>也没有size,clear属性
    3>垃圾回收机制

二十三.Proxy (代理)
1.理解
    源对象
    代理(拦截)
    操作
2.使用(拦截)
    get(target,key):拦截对象属性的读取
    set(target,key,val):拦截对象属性的设置
    deleteProperty(target,key):拦截删除对象key的操作

二十四.Reflect 

Reflect对象的设计目的
    1.以后方法放到Reflect对象上
    2.修改某些Object方法的返回结果
    3.让Object操作都变成函数行为,统一标准
        delete obj[key]
        key in obj 
        Reflect.has()
        Reflect.deleteProperty(obj,name)
    4.使用方便

二十五.Promise 

1.理解:解决异步编程的一种方案,让异步编程感觉像同步
    new Promise(function(resolve, reject){

    }).then(function(){
        
    }).tnen(function(){
        
    })

二十六.lterator和for..of 

1.for..of 
    格式:for(let k of xx)
2.lterator(遍历器)
    Iterator接口的目的:就是为所有数据结构,提供了一种统一的访问机制


二十七.Generator 
1.函数 
2.异步编程解决方案
格式:
    let fn=function* (){
        yield
    }

二十八.Module 
1.引入文件
    import './common/index.js'
    import './common/index'
    import './common'
引入所有:import * as obj from './common';
2.抛出
    export
    export default

二十九.项目_环境和文件搭建_表单渲染_事件添加
package.json 
src 
    common:公共目录
        公共方法
    index.html
    index.js 
    login
        init.js:初始化
        render.js:渲染
        event.js:事件
        
webpack.congig.js 
node_modules

public

补充内容
1》Fetch:请求接口$.ajax axios
    fetch('路径',{
        method:"POST",
        headers:{
            'Content-Type':'application/json'
        },
        params:{
            user:user.value,
            pwd:pwd.value
        }
    }).then(res=>{
        return res.json();
    })
2》async , await:解决异步
    let fn1 = async function () {
        let list = await fn()
        console.log('list-----', list)
    }
    fn1()
3》Mock :模拟接口